<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>充值成功</title>

    <link rel="stylesheet" href="../css/weui.css" />
    <link rel="stylesheet" href="../css/example.css" />
    <link rel="stylesheet" href="../css/plate.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style>
        html,
        body {
            font-family: 'PingFangSC-Regular';
            width: 100%;
            height: 99%;
            background: #F5F5F9;
            color: rgba(51, 51, 51, 0.87);
            margin: 0;
            overflow-y: auto;
        }

        .weui-tab {
            height: 14vh;
            background-color: blue;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        .car {
            width: 30px;
        }

        .hhead {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .parking_name {
            color: black;
            font-weight: 500;
            margin: 0px 6px 0px 6px;
        }

        .temp_parking {
            color: white;
            font-size: 10px;
            background-color: #ffba1e;
            padding: 3px 7px 3px 7px;
            margin-left: 4px;
            border-radius: 6px;
        }

        .borderbottom {
            display: flex;
            align-items: center;
            flex-direction: column;

        }

        .row {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 30px;
        }

        .row:nth-child(2) {
            margin-top: 10px;
        }

        .success {
            width: 24px;
            height: 24px;
            margin-right: 20px;
        }

        .tip {
            color: #8d8d8d;
            margin: 10px 0px 10px 0px;
            font-size: 12px;
        }

        .num {
            font-size: 20px;
            color: #0051bc;
            margin: 0px 6px 0px 6px;
            font-weight: 600;
        }

        .pay_success {
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="weui-cells" style="margin-top: 0px;">
            <div class="weui-cell hhead">
                <img class="car" src="../images/car@2x.png" alt="">
                <span id="car_num" class="parking_name">车牌号</span>
                <span class="temp_parking">储值卡</span>
            </div>
        </div>

        <div class="weui-cells" style="margin-top: 10px;">
            <div class="weui-cell borderbottom">
                <div class="row">
                    <img class="success" src="../images/success@2x.png" alt="">
                    <span class="pay_success">充值成功</span>
                </div>
                <div class="row">
                    <span class="tip">提示：储值卡充值成功，当前余额</span>
                    <span id="pay_money" class="num">645</span>
                    <span class="tip">元</span>
                </div>

            </div>
        </div>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script src="../js/common.js"></script>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>
            //code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。
            var auth_code = get_querystring("code");
            // 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
            var state = get_querystring("state");
            //openid和plate是全局变量
            var openid = null;
            var plate = null;



             function query_user() {
                var data = {
                    openid: openid,
                    auth_code: auth_code
                };
                var url = hostname + rest_domain + '/wechat/user/usermanager';
                $.ajax({
                    type: 'get',
                    url: url,
                    data: data,
                    timeout: 3 * 1000,
                    success: function (result, textStatus) {
                        var data = result.data;
                        if (data) {
                            localStorage.setItem('userinfo', JSON.stringify(result.data));
                        }
                        var uesrinfo = JSON.parse(localStorage.getItem('userinfo'));
                        var plates = uesrinfo.plates
                        draw_userplates(plates);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert('query user failed');
                    }
                });
            }

            function draw_userplates(userplate) {
                var plates = JSON.stringify(userplate);
                for (var key in userplate) {
                    var last_plate = JSON.stringify(key);
                }
                var car_num = last_plate.replace(/\"/g, "");
                $('#car_num').html(car_num);
            }

            $(function () {
                openid = sessionStorage.getItem("openid");
                var local_auth_code = sessionStorage.getItem("auth_code");
                if (local_auth_code != auth_code || !openid) {
                    sessionStorage.clear();
                    sessionStorage.setItem("auth_code", auth_code);
                    sessionStorage.setItem("state", JSON.stringify(state));
                    query_user();

                }

              
            })
        </script>

</body>

</html>